<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="./element/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border fit highlight-current-row
            :row-style="showTr">
            <el-table-column prop="date" label="日期" sortable width="180">
                <template slot-scope="scope">
                    <span v-for="(space, levelIndex) in scope.row._level" :key="levelIndex"
                        class="ms-tree-space"></span>
                    <template v-if="scope.row.children && scope.row.children.length > 0">
                        <span @click="handleToggle(scope.row)" v-if="!scope.row._expanded" class="svg-container">
                            +</span>
                        <span @click="handleToggle(scope.row)" v-if="scope.row._expanded" class="svg-container">-</span>
                    </template>
                    <span v-else class="ms-tree-space"></span>
                    <span>
                        <el-tooltip content="点击编辑" placement="right" effect="dark">
                            <span class="link-type">
                                <span>{{scope.row.name}}</span>
                            </span>
                        </el-tooltip>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" sortable width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

        <el-select v-model="value1" :multiple='true' placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>
</body>
<script src="./element/vue.js"></script>
<script src="./element/index.js"></script>
<script src="./utils/treeUtils.js"></script>
<script src="./data/tree.js"></script>
<script>
    console.log('TreeUtil', TreeUtil.treeToArray)
    new Vue({
        el: "#app",
        data: {
            value1: [],
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            defaultExpandAll: false,
            // tableData2:obj.data,
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [{
                    id: 31,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 32,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
            }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
        },
        computed: {
            // 格式化数据源
            tableData2: function () {
                let me = this
                return TreeUtil.treeToArray(obj.data, null, null, me.defaultExpandAll);
            }
        },
        mounted() {
            let a = [1, 3];
            let arr = this.truncate(a);
            console.log(arr)
        },
        methods: {
            truncate(arr) {
                var newArr = arr.concat();//concat（item）连接生成新数组，无item则是浅复制
                newArr.splice(arr.length - 1, 1);//splice第一个参数为要删除的起始位置，第二个参数为删除的个数
                return newArr;
            },
            showTr: function (row, index) {

                let styleJson = {};
                let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
                row.row._show = show
                if (show) {
                    return ''
                } else {
                    styleJson.display = 'none';
                    return styleJson
                }

                // return show ? '' : 'display:none;'
            },
            handleToggle(row) {
                console.log('row', row)
                row._expanded = !row._expanded;
            },
        }
    })
</script>

</html>